<template>
 <div class="charts" ref="charts"></div>
</template>

<script>
import echarts from 'echarts'
export default {
    name: 'ProgressEcharts',
    mounted() {

        let myEcharts = echarts.init(this.$refs.charts)

        myEcharts.setOption({
            xAxis: {
                show: false,
                min: 0,
                max: 100
            },
            yAxis: {
                show: false,
                type: 'category'
            },
            series: [
                {
                    type: 'bar',
                    data: [78],
                    barWidth: 10,
                    color: 'yellowgreen',
                    showBackground: true,
                    backgroundStyle: {
                        color: '#efefef'
                    },
                    label: {
                        show: true,
                        position: 'right',
                        formatter: '|'
                    }

                }
            ],
            grid: {
                top: 0,
                left: 0,
                right: 0,
                bottom: 0
            }
        })
    },

}
</script>

<style scoped lang="scss">
.charts {
    width: 100%;
    height: 100%;
}
</style>